<template>
   <div class="userGroupPage">
       <header>{{headTit}}</header>
       <span class="backTit" @click="navTo">返回列表</span>
       <div class="main">
        <ul>
            <el-button type="primary" style="margin-bottom: 10px" @click="addInput" v-if="!id">添加</el-button>
            <el-button type="primary" icon="el-icon-check" style="margin-bottom: 10px" @click="saveUserGroup()">保存设置</el-button>
            <li v-for="(ipt , index) in info"
                :key="index">
                <span class="li">
                    <span class="title">用户组标题</span>
                     <el-input
                             class="elinput"
                             ref="input"
                             v-model.trim = "ipt.user_group_name"
                     >
                     </el-input>
                </span>
                <span class="li">
                    <span class="title">备注</span>
                     <el-input
                             class="elinput"
                             ref="input"
                             v-model.trim = "ipt.user_group_remark"
                     >
                     </el-input>
                </span>
                <el-button type="danger" icon="el-icon-delete" circle style="width: 40px; height: 40px; margin-top: 28px" @click="delInput(ipt, index)" v-if="index"></el-button>
            </li>
        </ul>
       </div>
   </div>
</template>

<script>
    import Service from '../../services/main'
    export default {
        name: "Usergroupadd",
        data() {
            return {
                id: '',
                iserror: false,
                headTit: '新增用户组',
                info: [
                    {
                        user_group_name: '',
                        user_group_remark: '',
                    }
                ]
            }
        },
        created() {
            console.log(this.$route.params);
            if (this.$route.params.id) {
                this.id = this.$route.params.id;
                this.headTit = '编辑用户组';
                this.info[0].user_group_name = this.$route.params.user_group_name;
                this.info[0].user_group_remark = this.$route.params.user_group_remark;
            }
        },
        methods: {
            // 增加节点
            addInput() {
                this.info.push({
                    user_group_name: '',
                    user_group_remark: '',
                })
            },
            // 删除
            delInput(ipt, index) {
                if (index === 0) return false;
                this.info.splice(index, 1);
            },
            // 保存设置
            saveUserGroup() {
                if (!this.id) {
                    this.iserror = false;
                    this.info && this.info.forEach((item, index) => {
                        if (!item.user_group_name) {
                            this.$notify({
                                title: '警告',
                                message: '用户组标题不能为空',
                                type: 'warning'
                            });
                            this.iserror = true;
                            return;
                        }
                        this.info && this.info.forEach((items, indexs) => {
                            if (index !== indexs && (item.user_group_name === items.user_group_name)) {
                                this.iserror = true;
                                this.$notify({
                                    title: '警告',
                                    message: '用户组标题不得重复且不能为空',
                                    type: 'warning'
                                });
                                return false;
                            }
                        })
                    })
                    if (this.iserror) return false;
                    let params = {
                        info: this.info
                    }
                    Service.saveUserGroupAdd(this, params).then(res => {
                        if (res.errorCode === 1007) {
                            this.$notify({
                                title: '提示',
                                message: '保存成功',
                                type: 'success'
                            });
                        }
                    })
                } else {
                    this.iserror = false;
                    this.info && this.info.forEach(item => {
                        if (!item.user_group_name) {
                            this.$notify({
                                title: '警告',
                                message: '用户组标题不能为空',
                                type: 'warning'
                            });
                            this.iserror = true;
                            return;
                        }
                    })
                    if (this.iserror) return false;
                    let params = {
                        id: this.id,
                        user_group_name: this.info[0].user_group_name,
                        user_group_remark: this.info[0].user_group_remark
                    }
                    Service.editUsergroup(this,params).then(res => {
                        if (res.errorCode === 0) {
                            this.$notify({
                                title: '提示',
                                message: '修改成功',
                                type: 'success'
                            });
                        }
                    })
                }
            },
            // navTo
            navTo() {
                this.$router.push('/Usergroup');
            }
        }
    }
</script>

<style lang="scss" scoped>
    .userGroupPage {
        width: 100%;
        height: 100%;
        display: flex;
        overflow: hidden;
        flex-direction: column;
    }
    header {
        height: 50px;
        font-size: 24px;
        color: #666;
    }
    .backTit {
        font-size: 14px;
        font-weight: 700;
        color: #0080ff;
    }
    .main {
        flex: auto;
        overflow: auto;
        padding: 50px;
    }
    .el-select, .el-input{
    width: 100%;
    }
    ul li {
        display: flex;
        /*align-items: center;*/
    }
    .li {
        display: flex;
        width: 30%;
        flex-direction: column;
        margin-right: 20px;
    }
    .li .title {
        margin-bottom: 10px;
        color: #48576a;
    }
</style>
